<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>8.Vue.extend的简写形式</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue.extend(options) 的简写形式是 options
		 -->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//创建School组件
			let School = {
				template:`
					<div>
						<h2>学校名称：{{name}}</h2>	
						<h2>学校地址：{{address}}</h2>	
					</div>
				`,
				data(){
					return {
						name:'尚硅谷',
						address:'宏福科技园'
					}
				}
			}

			//创建App组件
			let App = {
				template:`<School/>`,
				components:{School}
			}

			//创建vm
			new Vue({
				el:'#demo',
				template:'<App/>',
				components:{App}
			})
			
		</script>
	</body>
</html>